<template>
	<view class="personal">
		<!-- 顶部栏 -->
		<!-- <nav-bar isBack  title="搜索" ></nav-bar> -->
		<nav-bars fontColor="#000"  title="搜索"></nav-bars>
		
		<!-- 内容-->
		 <view class="i_data">
			 <!-- tab栏 -->
			 <view class="i_dTabs">
			 	<!-- <view class="i_dtTab" :class="{'active': tabShow}" @tap="tabToggle()">
			 		<view class="i_dtContain">
			 			<view class="i_dtCan omit-1" :class="{'active': tabLabel_kind}">
			 				<view class="i_dtIcon1"></view>
			 				<text>{{tabLabel_kind || "全国"}}</text>
			 			</view>
			 		</view>
			 	</view> -->
                <view class="i_tInput">
                	<view class="i_tiIcon iconfont icon-search"></view>
                	<input type="text" focus v-model="keyword" @input="searchData" placeholder="请输入小区名字" placeholder-class="col-ccc" />
                </view>
			 </view>
		    <!-- 筛选框 -->
			<view class="i_dsBg" v-if="tabShow" @click="tabClose"></view>
		    <view class="i_dSelect" v-if="tabShow">
				<view class="i_dsBox">
		    	  <view class="x_list">
		    		<view class="i_dsList">
		    			<view v-for="item in addressprovince" :key="item.cityid">
		    				<view class="i_dsItem" :class="{'active': provinceid === item.cityid}" @tap="tabSelectprovince(item.cityid, item.city_name)">
		    					<view class="i_dsIcon iconfont icon-selected"></view>
		    					<text>{{item.city_name}}</text>
		    				</view>
		    			</view>
		    		</view>
					<view class="i_dsList">
						<view v-for="item in addresscity" :key="item.cityid">
							<view class="i_dsItem" :class="{'active': cityid === item.cityid}" @tap="tabSelectcity(item.cityid, item.city_name)">
								<view class="i_dsIcon iconfont icon-selected"></view>
								<text>{{item.city_name}}</text>
							</view>
						</view>
					</view>
					<view class="i_dsList">
						<view v-for="item in addressdistrict" :key="item.cityid">
							<view class="i_dsItem" :class="{'active': districtid === item.cityid}" @tap="tabSelectdistrict(item.cityid, item.city_name)">
								<view class="i_dsIcon iconfont icon-selected"></view>
								<text>{{item.city_name}}</text>
							</view>
						</view>
					</view>
		          </view>	
		    	</view>
		    </view>	 
		   <view class="i_dContain">
			<!-- 数据列表 -->
			<scroll-view class="i_dList" scroll-y @scrolltolower="nextPage">
			  <view class="no-card" v-if="list.length==0">
			      <image src="https://manager.ryz1620.com/static/my/sm.png"></image>
			      <text>暂无数据~</text>
			  </view>	
              <view class="clist" v-for="(item,index) in list" :key="index" @click="openurl(item)">
				  <text>{{item.name}}</text>
				  <text class="text2">{{item.district}}</text>
			  </view>
		   	
		   	</scroll-view>
		   </view>	 
		 </view>
	</view>
</template>

<script>
import service_desginview from '@/service/desginview'
import URL from '@/config/url.js'


export default {
	
	data() {
		return {
			addressprovince:[],
			addresscity:[],
			addressdistrict:[],
			tabLabel_kind:'全国',
			banner:[],
			// 轮播图
			threeIndex: 0,
			list:[],
			Indexs:0,
			tabShow:false,
			house_id: '',
			keyword: '', 
			province: '',  
			city: '',  
			district: '',
		    provinceid: '',
		    cityid: '',  
		    districtid: '', 
		}
	},
	onLoad(options) {
		this.$utils.getUrl()
		this.province = options.province
		this.city=options.city  
		this.district=options.district
		this.provinceid=options.provinceid
		this.cityid=options.cityid
		this.districtid=options.districtid
		if(options.district){
			this.tabLabel_kind = options.district
		}else if(options.city){
			this.tabLabel_kind = options.city
		}else if(options.province){
			this.tabLabel_kind = options.province
		}
		if(options.cityid){
			this.getcity()
		}
		if(options.districtid){
			this.getdistrict()
		}
		this.getCitys()
		this.gethotlist()
	},
	methods: {
		// 切换tab栏
		tabToggle() {
			this.tabShow = !this.tabShow
		},
		// 关闭tab栏
		tabClose() {
			this.tabShow = false
		},
		// 选择省
		tabSelectprovince(id,name){
			this.addressdistrict = []
			this.city=''
			this.district = ''
			this.tabLabel_kind = name
			this.provinceid = id
			this.province = name
			this.list= []
			this.getcity()
			this.gethotlist()
		},
		// 选择市
		tabSelectcity(id,name){
			this.cityid = id
			this.city = name
			this.tabLabel_kind = name
			this.list= []
			this.getdistrict()
			this.gethotlist()
		},
		// 选择区
		tabSelectdistrict(id,name){
			this.districtid = id
			this.district = name
			this.tabLabel_kind = name
			this.list= []
			this.gethotlist()
		},
		// 获取省市id
		getCitys() {
			service_desginview.getCitys({ cityid:''})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						this.addressprovince = data
					}
				})
		},
		// 获取市id
		getcity() {
			service_desginview.getCitys({ cityid:this.provinceid})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						this.addresscity = data
					}
				})
		},
		// 获取区id
		getdistrict() {
			service_desginview.getCitys({ cityid:this.cityid})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						this.addressdistrict = data
					}
				})
		},
		nextPage(){
			this.page++
			this.gethotlist()
		},
		searchData(){
			this.list= []
			this.gethotlist()
		},
		// 获取热门
		gethotlist() {
			service_desginview.getsearchbywords({ 
				keyword: this.keyword, 
				province: this.province,  
				city: this.city,  
				district: this.district,  
			})
				.then(res => {
					if (res.code == 1) {
						let data = res.data.list
						this.list = data				
					}
				})
		},
		// 3D-轮播图切换
		threeBannerChange(e) {
			this.threeIndex = e.detail.current
		},
		threeBanners(e) {
			this.Indexs = e.detail.current
		},
		openurl(item){
			uni.navigateTo({
				url:'/pages_view/pages/desiginview/list?province=' + item.province + '&keyword=' +item.name+'&city='+item.city+'&district='+item.district
			})
		},
	}
}
</script>

<style lang="scss" scoped>
page{
	background: #fff;
}
.personal {background: #fff;min-height:100vh;}
// 顶部作者栏=====
.personal .p_auth {height: 0;position: relative;z-index: 500;
	.p_aCan {width: 100%;overflow: hidden;display: flex;justify-content: space-between;align-items: center;opacity: 0;transition: opacity .3s;
		&.active {opacity: 1;}
	}
	.p_aFocus {width: 114rpx;height: 48rpx;line-height: 48rpx;text-align: center;color: #fff;font-size: 20rpx;margin: 0 36rpx 0 40rpx;border-radius: 28rpx;background: #333;float: right;
		&.active {color: #939393;background: #f6f7fb;}
	}
	.p_aHead {width: 68rpx;height: 68rpx;margin-right: 28rpx;border-radius: 50%;background: #f0f0f0;overflow: hidden;float: left;}
	.p_aName {height: 40rpx;line-height: 40rpx;overflow: hidden;flex: 1;}
}


// 背景墙=====
.personal  .p_wall {height: 316rpx;position: relative;
	.p_wPicture {width: 100vw;height: 500rpx;background: #f0f0f0;position: absolute;top: 0;left: 0;}
	.p_wShadow {width: 100vw;height: 500rpx;background: linear-gradient(180deg, rgba(18, 19, 23, .3) 0%, rgba(255, 255, 255, .3) 100%);position: absolute;top: 0;left: 0;}
}
// 内容=====
.personal  .i_data {border-radius: 20rpx 20rpx 0 0;background: #fff;position: relative;z-index: 101;overflow: hidden;display: flex;flex-flow: column;flex: 1;  padding: 0 20rpx;height: 100%;}
.i_tInput {height: 72rpx;border-radius: 10rpx;background: #f6f7fb;position: relative;overflow: hidden;width:100%;margin-top:22rpx;
	& > input {width: 100%;height: 100%;font-size: 24rpx;padding: 0 24rpx 0 72rpx;}
}
.i_tiIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #ccc;font-size: 32rpx;margin-top: -16rpx;position: absolute;top: 50%;left: 28rpx;}
.i_tSwiper {height: 200rpx;position: relative;}
		.i_tDots {width: 100%;position: absolute;bottom: 8rpx;left: 0;display: flex;justify-content: center;}
		.i_tDot {width: 24rpx;height: 36rpx;
			&.active .i_tIcon {background: #ffd425;}
			.i_tIcon {width: 12rpx;height: 12rpx;margin: 12rpx auto 0;border-radius: 50%;background: rgba(255, 255, 255, .5);}
		}
		.i_tCont {height: 100%;border-radius: 10rpx;background: #f6f7fb;position: relative;overflow: hidden;}
		.i_tBtn {width: 102rpx;height: 102rpx;background: rgba(0, 0, 0, .4);border: 1px solid #fff;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
		.i_tbImg {width: 42rpx;height: 42rpx;margin: 20rpx auto 0;}
		.i_tbTxt {width: 100%;height: 34rpx;line-height: 34rpx;text-align: center;color: #fff;font-size: 24rpx;position: absolute;top: 58rpx;left: 0;}
// tab栏==
.personal  .i_data .i_dTabs {height: 114rpx;display: flex;justify-content: space-between;
	.i_dtTab {height: 114rpx;color: #939393;font-size:24rpx;overflow: hidden;width:150rpx;
		.i_dtContain {width: 100%;height: 100%;padding-left: 8rpx;padding-right: 8rpx;overflow: hidden;display: flex;justify-content: center;}
		&:nth-child(1) .i_dtContain {padding-left: 36rpx;justify-content: flex-start;}
		&:nth-last-child(1) .i_dtContain {padding-right: 36rpx;justify-content: flex-end;}
		.i_dtCan {height: 114rpx;line-height: 114rpx;text-align: center;padding-right: 20rpx;position: relative;
			&.active {color: #a98f68;}
		}
		.i_dtIcon1, .i_dtIcon2, .i_dtIcon3 {width: 0;height: 0;border: 6rpx solid transparent;border-top-color: #6c6c6c;position: absolute;top: 50%;right: 0;}
		.i_dtIcon1 {top: 54rpx;transition: transform .3s;transform: rotate(0);transform-origin: 50% 25%;}
		.i_dtIcon2 {border-color: transparent;border-bottom-color: #ccc;top: 42rpx;
			&.active {border-bottom-color: #6c6c6c;}
		}
		.i_dtIcon3 {border-top-color: #ccc;top: 62rpx;
			&.active {border-top-color: #6c6c6c;}
		}
		.i_dtIcon4 {height: 24rpx;line-height: 24rpx;color: #fff;font-size: 20rpx;padding: 0 6rpx;margin: -12rpx 0 0 -12rpx;border-radius: 12rpx;background: #a98f68;position: absolute;top: 50%;left: 100%;}
		// tab选中效果
		&.active {color: #a98f68;
			.i_dtIcon1 {border-top-color: #a98f68;transform: rotate(180deg);transform-origin: 50% 25%;}
		}
	}
}
.i_dItem{
	margin:20rpx 0;
}
.s_tops{
	position: relative;
	padding-left: 220rpx;
	.ts_left{
		position:absolute;
		width:200rpx;
		height:200rpx;
		left:0;
		top:0;
		border-radius:10rpx;
		border:1px #CCCCCC solid;
		overflow: hidden;
	}
	.ts_right{
		overflow: hidden;
		image{
			height: 420rpx;
		}
	}
}
.s_tit{
	line-height:80rpx;
	margin-top:20rpx;
	font-weight:600;
	position: relative;
	text{
	  position:absolute;
	  background:#F6F7FB;
	  height:60rpx;
	  line-height: 60rpx;
	  width:140rpx;
	  text-align:center;
	  right:0;
	  top:10rpx;
	  border-radius: 8rpx;
	}
}
// 背景
.i_dsBg {width: 100%;height: 100%;background: rgba(0, 0, 0, .6);;position: absolute;left: 0;top:110rpx;z-index: 9;}
.personal .i_data .i_dSelect {width: 100%;position: absolute;top: 110rpx;left: 0;z-index: 10;
	// 弹窗
	.i_dsBox {width: 100%;border-radius: 0 0 20rpx 20rpx;background: #fff;}
	.i_dsList {flex:1;overflow-y: auto;}
	.i_dsItem {height: 62rpx;line-height: 62rpx;font-size: 24rpx;padding-left: 36rpx;position: relative;
		&.active {color: #a98f68;}
		&.active .i_dsIcon {display: block;}
		.i_dsIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #a58f6d;font-size: 32rpx;position: absolute;top: 14rpx;right: 32rpx;display: none;}
	}
	.i_dsTags {padding: 14rpx 22rpx;overflow: hidden;
		.i_dsTag {padding: 14rpx 10rpx;float: left;
			.i_dsTag-box {height: 50rpx;line-height: 50rpx;font-size: 24rpx;padding: 0 18rpx 0 20rpx;background: #f6f7fb;border-radius: 26rpx;}
			&.active .i_dsTag-box {color: #a98f68;background: #f9f6f3;}
			&:active .i_dsTag-box {opacity: .88;}
		}
	}
	.i_dsBtns {height: 88rpx;margin-top: 26rpx;display: flex;
		.i_dsReset, .i_dsConfim {height: 88rpx;font-size: 24rpx;background: #f6f7fb;display: flex;justify-content: center;align-items: center;flex: 1;
			&:active {opacity: .88;}
		}
		.i_dsConfim {color: #fff;background: #a98f68;}
	}
}
.hottit{
	line-height: 80rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 10rpx;
}
.x_list{
	display: flex;
	height: 400rpx;
	background: #fff;
}
.i_dList{
	height: calc(100vh - 250rpx);
}
.clist{
	padding: 20rpx;
	line-height: 40rpx;
}
.clist .text2{
	float: right;
	color: #999;
}
.no-card {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    border-radius: 20rpx 20rpx 0 0;
	    padding-top: 40rpx;
	}
	
	.no-title {
	    padding: 30rpx 0;
	}
	
	.no-card>text {
	    font-size: 24rpx;
	    color: #999;
	}
	
	.no-bnt {
	    padding: 10rpx 20rpx;
	    margin: 20rpx;
	    border: 2rpx solid #eee;
	    font-size: 26rpx;
	    background-color: #fff;
	}
	
	.no-card image {
	    height: 240rpx;
	    width: 240rpx;
	    padding: 40rpx;
	}
</style>